<template>
  <!-- 整体容器，用于包裹整个页面内容 -->
  <div class="large-screen-container">
    <!-- 头部导航栏，包含退出登录功能 -->
    <el-header class="elheader">
        <div class="header-content">

          <el-tag type="danger">当前登陆人{{ store.ccstore.UserName }}</el-tag>
            <!-- 退出登录的路由链接 -->
            <RouterLink to="/">退出登录</RouterLink>
            
        </div>
    </el-header>
    <!-- 布局容器，用于组织侧边栏和主内容区域 -->
    <el-container>
      <!-- 侧边栏区域，占据4列宽度 -->
      <el-col :span="4">
        <!-- 垂直菜单组件，设置默认激活项、激活文本颜色、背景颜色、文本颜色，并启用路由 -->
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          active-text-color="#ffd04b"
          background-color="#2c3e50"
          text-color="#fff"
          router
        >
          <!-- 子菜单1：生产管理 -->
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>生产管理</span>
            </template>
            <!-- 生产管理下的菜单项 -->
            <el-menu-item index="/GetWorksView">生产工单</el-menu-item>
            <el-menu-item index="/GetProcesview">工艺流程</el-menu-item>
            <el-menu-item index="/ShowPorduction">生产报工</el-menu-item>
            <el-menu-item index="/GetRequisitionsView">生产领料</el-menu-item>
            <el-menu-item index="/GetProductionwork">生产工单系统</el-menu-item>
          </el-sub-menu>
          <!-- 子菜单2：企业管理 -->
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>企业管理</span>
            </template>
            <!-- 企业管理下的菜单项 -->
            <el-menu-item index="/GetDepartmentView">部门信息</el-menu-item>
            <el-menu-item index="/GetEnterpriseView">企业信息</el-menu-item>
          </el-sub-menu>
          <!-- 子菜单3：客户管理 -->
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>客户管理</span>
            </template>
            <!-- 客户管理下的菜单项 -->
            <el-menu-item index="/GetCustomerview">客户信息</el-menu-item>
          </el-sub-menu>
          <!-- 子菜单4：仓储管理 -->
          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>仓储管理</span>
            </template>
            <!-- 仓储管理下的菜单项 -->
            <!-- <el-menu-item index="/Show">仓库设置</el-menu-item> -->

            <el-menu-item index="/Showsalesreceipt">销售出库</el-menu-item>
            <el-menu-item index="/ShowproductionreturnView">生产退料</el-menu-item>
            <el-menu-item index="/Showarredsinfo">到货通知单</el-menu-item>
            <el-menu-item index="/ZYTBShow">转移调拨</el-menu-item>
            <el-menu-item index="/Showbilling">开票信息</el-menu-item>
              <el-menu-item index="/Showarrival">到票信息</el-menu-item>
            <el-menu-item index="/Showarrival">到票信息</el-menu-item>
           
          </el-sub-menu>
          <!-- 子菜单5：工序管理 -->
          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>工序管理</span>
            </template>
            <!-- 工序管理下的菜单项 -->
            <el-menu-item index="/ProcessinfoShow">工序显示</el-menu-item>
          </el-sub-menu>
          <!-- 子菜单6：供应商管理 -->
          <el-sub-menu index="6">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>供应商管理</span>
            </template>
            <!-- 供应商管理下的菜单项 -->
            <el-menu-item index="/Showsupplier">供应商管理</el-menu-item>
          </el-sub-menu>
          <!-- 子菜单7：物料 -->
          <el-sub-menu index="7">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>物料</span>
            </template>
            <!-- 物料下的菜单项 -->
            <el-menu-item index="/ShowmateView">物料产品管理</el-menu-item>
            <el-menu-item index="/Showmateprite">物料产品分类</el-menu-item>
          </el-sub-menu>
          <!-- 子菜单8：授权中心 -->
          <el-sub-menu index="8">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>授权中心</span>
            </template>
            <!-- 授权中心下的菜单项 -->
            <el-menu-item index="/NewUserList">用户列表</el-menu-item>
            <el-menu-item index="/NewRoleListView">角色列表</el-menu-item>
            <el-menu-item index="/MenuQueryView">菜单列表</el-menu-item>
            <el-menu-item index="/RoleMenusView">角色菜单列表</el-menu-item>
          </el-sub-menu>
          <!-- 子菜单9：生产排产 -->
          <el-sub-menu index="9">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>生产排产</span>
            </template>
            <!-- 生产排产下的菜单项 -->
            <el-menu-item index="/SchedulingShow">生产排产</el-menu-item>
          </el-sub-menu>
          <!-- 子菜单10：库存管理 -->
          <el-sub-menu index="10">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>库存管理</span>
            </template>
            <!-- 库存管理下的菜单项 -->
            <el-menu-item index="/GetInventorylistView">库存清单</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="11">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>BOM</span>
            </template>
            <!-- 库存管理下的菜单项 -->
       
            <el-menu-item index="/GOngzuoLiu">工作台</el-menu-item>
            <el-menu-item index="/GetBOMguanView">BOM管理</el-menu-item>
            <el-menu-item index="/C">C</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="12">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>采购订单管理</span>
            </template>
            <!-- 库存管理下的菜单项 -->

            <el-menu-item index="/ShowCG">采购菜单</el-menu-item>
            <el-menu-item index="/GetIncominginformationView">采购入库</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
      <!-- 主内容区域，用于显示路由对应的视图 -->
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {useCounterStore} from "@/stores/counter"
import router from '@/router';

const store=useCounterStore();




</script>

<style scoped>
/* 全局body样式，设置字体、行高 */
body {
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei", sans-serif;
  line-height: 1.6;
}

/* 整体容器样式，相对定位，最小高度100vh，隐藏溢出 */
.large-screen-container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* 头部导航栏样式，固定定位在顶部，设置背景色、文本颜色、内边距等 */
.elheader {
  background-color: #2c3e50;
  color: #fff;
  padding: 20px 32px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: 2px solid #34495e;
  height: 64px;
  display: flex;
  align-items: center;
}

/* 退出登录文本样式，设置光标为指针 */
.logout {
  cursor: pointer;
}

/* 垂直菜单样式，固定定位在头部下方左侧，设置宽度、背景色、边框等 */
.el-menu-vertical-demo {
  width: 240px;
  background-color: #2c3e50;
  border-right: 2px solid #34495e;
  position: fixed;
  top: 64px;
  bottom: 0;
  left: 0;
  z-index: 900;
  overflow-y: auto;
  height: calc(100% - 64px);
}

/* 主内容区域样式，设置左侧边距（与侧边栏宽度一致）、顶部边距，背景色、圆角、阴影等 */
.el-main {
  margin-left: 5px;
  margin-top: 64px;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 主内容区域内按钮样式，设置背景色、文本颜色、边框色 */
.el-main .el-button {
  background-color: #2c3e50;
  color: #fff;
  border-color: #2c3e50;
  min-width: 80px;
}

/* 按钮悬停样式，改变背景色和边框色 */
.el-main .el-button:hover {
  background-color: #34495e;
  border-color: #34495e;
}

/* 主内容区域内输入框样式，设置边框色 */
.el-main .el-input__inner {
  border-color: #ced4da;
}

/* 输入框聚焦样式，改变边框色和添加阴影 */
.el-main .el-input__inner:focus {
  border-color: #2c3e50;
  box-shadow: 0 0 0 2px rgba(44, 62, 80, 0.1);
}

/* 主内容区域内表格样式，设置边框 */
.el-main .el-table {
  border: 2px solid #e9ecef;
  margin-top: 0;
}

/* 表格头部样式，设置背景色、文本颜色 */
.el-main .el-table__header {
  background-color: #2c3e50;
  color: #fff;
}

/* 表格头部单元格样式，设置内边距、字体粗细 */
.el-main .el-table__header th {
  padding: 16px;
  font-weight: 600;
}

.elheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

/* 表格主体单元格样式，设置内边距、底部边框 */
.el-main .el-table__body td {
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
}

.flex-container {
  display: flex;
  justify-content: flex-end;
}
</style>